<template>
	<view class="home">
		<view class="activebg">
			<ty-swiper-home :list="detail.carousel" height='360' radius='50'></ty-swiper-home>
		</view>
		<view class="bg-ff margin-top-30 bg-shadow radius-40 padding-30">
			<view class="text-32">{{detail.name}}</view>
			<view class="flex align-center justify-between margin-top-5">
				<view class="text-32 text-red"> <text class="text-24">￥</text> {{detail.price}}</view>
				<view class="text-28 text-66">销量：{{detail.sales}}</view>
			</view>
		</view>
		<view class="text-28 text-66 margin-top-40 line-40">
			<ty-text-rich-text :html="detail.description"></ty-text-rich-text>
		</view>
		<view class="memberimg position-relative" v-for="(item,index) in detail.video_url" :key="index">
			<video :src="item" class="memberimg position-relative margin-top-30" danmu-btn controls></video>
			<view class="memberimg position-absolute" style="z-index: 9;top: 0;left: 0;" @click="choseSp(item)">
			</view>
		</view>
		<!-- 视频弹窗 -->
		<view class="" v-if="video_layer_show">
			<ty-layer-videodetail :videourl='video_url' @lvshow="getoff"></ty-layer-videodetail>
		</view>
		<view class="footerbg flex align-center justify-between padding-lr-30">
			<button open-type="contact" class="flex align-center flex-direction">
				<image src="/static/board/myg2.png" mode="" class="footimg"></image>
				<view class="text-28">客服</view>
			</button>
			<button class="flex align-center flex-direction position-relative" @click="go('/pages/shop/car')">
				<image src="/static/board/car.png" mode="" class="footimg"></image>
				<view class="text-28">购物车</view>
				<view class="carnumbg">{{cartnum}}</view>
			</button>
			<view class="hjfw" @click="is_car_show=true">加入购物车</view>
			<view class="jsfw" @click="is_car_show=true">立即购买</view>
		</view>
		<!-- 规格 -->
		<view class="layer flex align-end" v-if="is_car_show" @click="is_car_show=false">
			<view class="layercar" @click.stop>
				<view class="flex align-center padding-30">
					<view class="text-32 flex-one">商品</view>
					<view class="cuIcon-close" @click="is_car_show=false"></view>
				</view>
				<view class="flex align-center margin-lr-30">
					<image :src="detail.image" mode="" class="listimg"></image>
					<view class="flex-one margin-left-30">
						<view class="text-28 height-60 line-30 text-cut-two">{{detail.name}}</view>
						<view class="text-red text-28 flex-one margin-top-40">￥{{price}}</view>
					</view>
				</view>
				<scroll-view scroll-y="true" class="height-330 margin-top-30">
					<view class="flex justify-between flex-wrap margin-lr-30">
						<view class="skubtn" :class="skuid==item.id?'bg-1a text-ff':'bg-f5'"
							v-for="(item,index) in skulist" :key="index"
							@click="choseSku(item.id,item.spec_name,item.price)">{{item.spec_name}}￥{{item.price}}
						</view>
					</view>
				</scroll-view>
				<view class="flex align-center justify-between padding-30">
					<view class="leftbtn" @click="joincar">加入购物车</view>
					<view class="rightbtn" @click="gobuy">立即结算</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: "",
				detail: "",
				price: "",
				skulist: [],
				skuid: "",
				spec_name: "",
				is_car_show: false,
				video_layer_show: false,
				video_url: "",
				cartnum:""
			}
		},
		onLoad(options) {
			this.id = options.id
		},
		onReady() {
			this.rq.getData('MemProducts/products_info', {
				id: this.id
			}).then(res => {
				if (res.code == 1) {
					this.detail = res.data
					this.price = res.data.price
					this.spec_name = res.data.name
				}
			})
			this.rq.getData('MemProducts/specs', {
				id: this.id
			}).then(res => {
				if (res.code == 1) {
					this.skulist = res.data
				}
			})
		},
		onShow() {
			this.getCart()
		},
		methods: {
			choseSp(i) {
				this.video_url = i
				this.video_layer_show = true
			},
			getoff() {
				this.video_layer_show = false
			},
			choseSku(id, spec_name, price) {
				this.skuid = id
				this.spec_name = spec_name
				this.price = price
			},
			joincar() {
				// if (this.skuid == '') {
				// 	this.cn.alert('请选择规格')
				// 	return
				// }
				this.rq.getData('Memproducts/add_cart', {
					product_id: this.detail.id,
					num: 1,
					spec_id: this.skuid
				}).then(res => {
					if (res.code == 1) {
						this.cn.alert('加入成功')
						this.getCart()
					}
				})
			},
			gobuy() {
				// if (this.skuid == '') {
				// 	this.cn.alert('请选择规格')
				// 	return
				// }
				uni.navigateTo({
					url: '/pages/shop/order?id=' + this.detail.id + '&name=' + this.detail.name + '&num=1' +
						'&price=' + this.price + '&image=' + this.detail.image + '&skuid=' + this.skuid +
						'&postage=' + this.detail.postage + '&spec_name=' + this.spec_name
				})
			},
			getCart() {
				this.rq.getData('Memproducts/cart_list').then(res => {
					if (res.code == 1) {
						this.cartnum = res.num
					}
				})
			}
		}
	}
</script>


<style>
	.home {
		width: 100%;
		min-height: 100vh;
		background: #FEFEFE;
		padding: 40rpx 30rpx 210rpx;
	}

	.memberimg {
		width: 100%;
		height: 360rpx;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
	}

	.footerbg {
		width: 100%;
		height: 196rpx;
		background: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 999;
	}

	.footimg {
		width: 50rpx;
		height: 50rpx;
	}

	.hjfw {
		width: 240rpx;
		height: 70rpx;
		border-radius: 2000rpx 2000rpx 2000rpx 2000rpx;
		border: 2rpx solid #999999;
		font-size: 28rpx;
		color: #101010;
		line-height: 70rpx;
		text-align: center;
	}

	.jsfw {
		width: 240rpx;
		height: 70rpx;
		background: #101010;
		border-radius: 2000rpx 2000rpx 2000rpx 2000rpx;
		font-size: 28rpx;
		color: #fff;
		line-height: 70rpx;
		text-align: center;
	}

	.layer {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.6);
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9999;
	}

	.layercar {
		width: 100%;
		/* height: 680rpx; */
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
	}

	.height-330 {
		height: 270rpx;
	}

	.listimg {
		width: 150rpx;
		height: 150rpx;
		border-radius: 16rpx;
	}

	.skubtn {
		width: 330rpx;
		height: 60rpx;
		border-radius: 40rpx;
		font-size: 24rpx;
		text-align: center;
		line-height: 60rpx;
		margin-bottom: 30rpx;
	}

	.leftbtn {
		width: 326rpx;
		height: 88rpx;
		border-radius: 2000rpx 2000rpx 2000rpx 2000rpx;
		border: 2rpx solid #999999;
		font-size: 32rpx;
		color: #101010;
		line-height: 88rpx;
		text-align: center;
	}

	.rightbtn {
		width: 326rpx;
		height: 88rpx;
		background: #101010;
		border-radius: 2000rpx 2000rpx 2000rpx 2000rpx;
		font-size: 32rpx;
		color: #fff;
		line-height: 88rpx;
		text-align: center;
	}

	.carnumbg {
		width: 25rpx;
		height: 25rpx;
		background: red;
		border-radius: 50%;
		font-size: 16rpx;
		color: #fff;
		text-align: center;
		line-height: 25rpx;
		position: absolute;
		right: 0;
		top: -10rpx;
	}
</style>